<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>康复智联 - 可穿戴传感个性化康复训练系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- 配置 Tailwind CSS -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        "primary-light": '#4080FF',
                        "primary-dark": '#0E42D2',
                        secondary: '#36CBCB',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#F5222D',
                        info: '#8C8C8C',
                        light: '#F5F5F5',
                        dark: '#1F1F1F',
                        "neutral-50": '#F9FAFB',
                        "neutral-100": '#F3F4F6',
                        "neutral-200": '#E5E7EB',
                        "neutral-800": '#1F2937'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'elevation-1': '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
                        'elevation-2': '0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)',
                        'elevation-3': '0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)',
                        'elevation-4': '0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05)',
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.6s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'bounce-slow': 'bounce 2s infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                    },
                    transitionProperty: {
                        'height': 'height',
                        'spacing': 'margin, padding',
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
            }
            .card-hover {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover:hover {
                transform: translateY(-5px) scale(1.01);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .gradient-mask {
                mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
                -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
            }
            .bg-glass {
                background: rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
            .bg-glass-dark {
                background: rgba(31, 31, 31, 0.8);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
            .clip-path-slant {
                clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
            }
            .progress-bar-shine {
                position: relative;
                overflow: hidden;
            }
            .progress-bar-shine::after {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
                animation: shine 2s infinite;
            }
            @keyframes shine {
                100% {
                    left: 100%;
                }
            }
            .chart-container {
                position: relative;
                height: 100%;
                width: 100%;
            }
            .btn-hover-effect {
                position: relative;
                overflow: hidden;
                z-index: 1;
            }
            .btn-hover-effect::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 0;
                background: rgba(0,0,0,0.1);
                transition: all 0.3s ease;
                z-index: -1;
            }
            .btn-hover-effect:hover::after {
                height: 100%;
            }
            .parallax-bg {
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
    <!-- 导航栏 -->
    <nav id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-glass shadow-md">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2 group">
                <i class="fa fa-heartbeat text-primary text-2xl transition-transform duration-300 group-hover:scale-110"></i>
                <span class="text-xl font-bold text-primary tracking-wide">康复智联</span>
            </div>
            
            <div class="hidden md:flex items-center space-x-1">
                <a href="#overview" class="px-4 py-2 text-dark hover:text-primary transition-all duration-300 rounded-lg hover:bg-primary/5 relative group">
                    系统概述
                    <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
                </a>
                <a href="#features" class="px-4 py-2 text-dark hover:text-primary transition-all duration-300 rounded-lg hover:bg-primary/5 relative group">
                    核心功能
                    <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
                </a>
                <a href="#modules" class="px-4 py-2 text-dark hover:text-primary transition-all duration-300 rounded-lg hover:bg-primary/5 relative group">
                    系统模块
                    <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
                </a>
                <a href="#data" class="px-4 py-2 text-dark hover:text-primary transition-all duration-300 rounded-lg hover:bg-primary/5 relative group">
                    数据监测
                    <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
                </a>
                <a href="#architecture" class="px-4 py-2 text-dark hover:text-primary transition-all duration-300 rounded-lg hover:bg-primary/5 relative group">
                    系统架构
                    <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
                </a>
            </div>
            
            <div class="flex items-center space-x-4">
                <button class="hidden md:block px-5 py-2 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-all duration-300 btn-hover-effect">
                    医护登录
                </button>
                <button class="px-5 py-2 rounded-full bg-primary text-white hover:bg-primary-dark transition-all duration-300 btn-hover-effect shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                    患者登录
                </button>
                <button class="md:hidden text-dark text-xl p-2 rounded-full hover:bg-gray-100 transition-colors duration-300" id="menu-toggle">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="fixed inset-0 bg-black/50 z-50 opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="bg-white h-full w-64 ml-auto shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out">
            <div class="flex justify-between items-center p-6 border-b">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-heartbeat text-primary text-2xl"></i>
                    <span class="text-xl font-bold text-primary">康复智联</span>
                </div>
                <button id="close-menu" class="text-dark text-xl p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="flex flex-col space-y-1 p-4">
                <a href="#overview" class="px-4 py-3 text-dark hover:bg-primary/10 hover:text-primary transition-all duration-300 rounded-lg mobile-nav-link">
                    <i class="fa fa-info-circle w-6"></i> 系统概述
                </a>
                <a href="#features" class="px-4 py-3 text-dark hover:bg-primary/10 hover:text-primary transition-all duration-300 rounded-lg mobile-nav-link">
                    <i class="fa fa-cogs w-6"></i> 核心功能
                </a>
                <a href="#modules" class="px-4 py-3 text-dark hover:bg-primary/10 hover:text-primary transition-all duration-300 rounded-lg mobile-nav-link">
                    <i class="fa fa-th-large w-6"></i> 系统模块
                </a>
                <a href="#data" class="px-4 py-3 text-dark hover:bg-primary/10 hover:text-primary transition-all duration-300 rounded-lg mobile-nav-link">
                    <i class="fa fa-line-chart w-6"></i> 数据监测
                </a>
                <a href="#architecture" class="px-4 py-3 text-dark hover:bg-primary/10 hover:text-primary transition-all duration-300 rounded-lg mobile-nav-link">
                    <i class="fa fa-sitemap w-6"></i> 系统架构
                </a>
            </div>
            <div class="mt-auto p-6 space-y-4 border-t">
                <button class="w-full px-5 py-3 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-all duration-300 btn-hover-effect">
                    <i class="fa fa-user-md mr-2"></i> 医护登录
                </button>
                <button class="w-full px-5 py-3 rounded-full bg-primary text-white hover:bg-primary-dark transition-all duration-300 btn-hover-effect shadow-md">
                    <i class="fa fa-user mr-2"></i> 患者登录
                </button>
            </div>
        </div>
    </div>

    <!-- 英雄区域 -->
    <section class="pt-28 pb-20 md:pt-36 md:pb-32 bg-gradient-to-br from-blue-50 to-primary/5 relative overflow-hidden">
        <!-- 背景装饰元素 -->
        <div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/10 rounded-full filter blur-3xl animate-pulse-slow"></div>
        <div class="absolute -bottom-40 -left-20 w-80 h-80 bg-blue-200/20 rounded-full filter blur-3xl animate-pulse"></div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in">
                    <div class="inline-block px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6 border border-primary/20">
                        <i class="fa fa-star mr-1.5"></i> 医疗级智能康复解决方案
                    </div>
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-6 text-shadow-sm">
                        可穿戴传感的<br>
                        <span class="text-primary">个性化康复训练系统</span>
                    </h1>
                    <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-lg leading-relaxed">
                        通过多模态传感融合、边缘-云协同计算、BLE 5.0 低功耗无线传输以及 AI 数据分析，打造医护-患者-家属三方闭环康复管理体系。
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <button class="px-8 py-4 rounded-full bg-primary text-white text-lg font-medium hover:bg-primary-dark transition-all duration-300 shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transform hover:-translate-y-1 btn-hover-effect">
                            了解更多
                        </button>
                        <button class="px-8 py-4 rounded-full bg-white text-primary text-lg font-medium hover:bg-gray-50 transition-all duration-300 shadow-lg border border-primary/20 hover:shadow-xl transform hover:-translate-y-1 btn-hover-effect">
                            <i class="fa fa-play-circle mr-2"></i>观看演示
                        </button>
                    </div>
                    
                    <div class="flex items-center mt-12 space-x-8">
                        <div class="flex -space-x-4">
                            <img src="https://picsum.photos/id/237/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white shadow-md hover:scale-110 transition-transform">
                            <img src="https://picsum.photos/id/238/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white shadow-md hover:scale-110 transition-transform">
                            <img src="https://picsum.photos/id/239/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white shadow-md hover:scale-110 transition-transform">
                            <div class="w-10 h-10 rounded-full border-2 border-white bg-primary flex items-center justify-center text-white text-xs font-bold shadow-md hover:scale-110 transition-transform">
                                50+
                            </div>
                        </div>
                        <div>
                            <div class="flex items-center mb-1">
                                <i class="fa fa-star text-warning"></i>
                                <i class="fa fa-star text-warning"></i>
                                <i class="fa fa-star text-warning"></i>
                                <i class="fa fa-star text-warning"></i>
                                <i class="fa fa-star-half-o text-warning"></i>
                                <span class="ml-2 font-medium">4.8/5</span>
                            </div>
                            <p class="text-sm text-gray-500">来自全国100+医疗机构的信赖</p>
                        </div>
                    </div>
                </div>
                
                <div class="md:w-1/2 relative">
                    <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl transform transition-all duration-500 hover:scale-[1.02] hover:rotate-[1deg]">
                        <img src="https://picsum.photos/id/1/600/400" alt="可穿戴康复设备演示" class="w-full h-auto rounded-2xl">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h3 class="text-white font-bold text-xl">智能康复训练</h3>
                                    <p class="text-gray-200">实时监测 · 个性化指导</p>
                                </div>
                                <div class="bg-primary rounded-full w-12 h-12 flex items-center justify-center transform transition-transform hover:scale-110">
                                    <i class="fa fa-heartbeat text-white text-xl"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 浮动数据卡片 -->
                    <div class="absolute top-1/4 -right-4 md:-right-12 z-20 bg-white rounded-xl p-4 shadow-lg card-hover transition-all duration-300 hover:shadow-xl hover:scale-105 animate-float">
                        <div class="flex items-center space-x-3">
                            <div class="bg-success/10 rounded-full p-3">
                                <i class="fa fa-line-chart text-success"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">康复效果提升</p>
                                <p class="text-lg font-bold text-dark">+78%</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="absolute bottom-1/4 -left-4 md:-left-12 z-20 bg-white rounded-xl p-4 shadow-lg card-hover transition-all duration-300 hover:shadow-xl hover:scale-105 animate-float-delay">
                        <div class="flex items-center space-x-3">
                            <div class="bg-warning/10 rounded-full p-3">
                                <i class="fa fa-clock-o text-warning"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">训练依从性</p>
                                <p class="text-lg font-bold text-dark">92%</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 装饰元素 -->
                    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full blur-3xl -z-10 transform -translate-x-1/4 -translate-y-1/4"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 系统概述 -->
    <section id="overview" class="py-20 bg-white relative overflow-hidden">
        <div class="absolute top-0 right-0 w-72 h-72 bg-primary/5 rounded-full filter blur-3xl -z-10"></div>
        <div class="absolute bottom-0 left-0 w-80 h-80 bg-secondary/5 rounded-full filter blur-3xl -z-10"></div>
        
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <div class="inline-block px-4 py-2 rounded-full bg-primary/5 text-primary text-sm font-medium mb-4 border border-primary/10">
                    <i class="fa fa-cubes mr-2"></i> 系统架构
                </div>
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4 text-shadow-sm">系统概述</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg leading-relaxed">
                    我们的系统分为医护端与患者端两大模块，通过先进的传感技术和智能算法，为康复训练提供全方位支持
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div class="relative group">
                    <div class="bg-gradient-to-br from-primary/10 to-secondary/10 rounded-3xl p-1 transform transition-all duration-500 group-hover:scale-[1.02] group-hover:shadow-xl">
                        <div class="bg-white rounded-2xl overflow-hidden">
                            <img src="https://picsum.photos/id/2/600/400" alt="系统功能展示" class="w-full h-auto transform transition-all duration-700 group-hover:scale-105">
                        </div>
                    </div>
                    
                    <!-- 悬浮信息卡 -->
                    <div class="absolute -bottom-8 -left-8 bg-white rounded-xl p-5 shadow-lg max-w-xs transform transition-all duration-300 hover:shadow-xl hover:translate-y-1 card-hover-effect animate-float">
                        <div class="flex items-center space-x-4 mb-3">
                            <div class="bg-primary/10 rounded-full w-12 h-12 flex items-center justify-center transform transition-transform hover:scale-110">
                                <i class="fa fa-check text-primary text-xl"></i>
                            </div>
                            <h4 class="font-bold text-lg">临床验证</h4>
                        </div>
                        <p class="text-gray-600 text-sm">
                            经过3家三甲医院临床试验，有效提升康复效率40%，缩短康复周期25%
                        </p>
                    </div>
                </div>
                
                <div class="space-y-6">
                    <div class="bg-light rounded-xl p-6 transition-all duration-300 hover:shadow-md hover:shadow-primary/5 transform hover:-translate-y-1 border border-transparent hover:border-primary/10 group">
                        <div class="flex items-start space-x-4">
                            <div class="bg-primary/10 rounded-full p-3 transform transition-transform duration-300 group-hover:scale-110 group-hover:bg-primary/20">
                                <i class="fa fa-user-md text-primary"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-xl mb-2 group-hover:text-primary transition-colors">医护端</h3>
                                <p class="text-gray-600 leading-relaxed">
                                    实现「数据监测‑方案制定‑过程管控‑效果评估」全流程管理，支持多角色操作，提供患者管理、设备绑定、康复阶段划分等核心功能
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-light rounded-xl p-6 transition-all duration-300 hover:shadow-md hover:shadow-secondary/5 transform hover:-translate-y-1 border border-transparent hover:border-secondary/10 group">
                        <div class="flex items-start space-x-4">
                            <div class="bg-secondary/10 rounded-full p-3 transform transition-transform duration-300 group-hover:scale-110 group-hover:bg-secondary/20">
                                <i class="fa fa-user text-secondary"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-xl mb-2 group-hover:text-secondary transition-colors">患者端</h3>
                                <p class="text-gray-600 leading-relaxed">
                                    实现「简单操作‑清晰指引‑实时反馈‑激励互动」的用户体验，提供训练指导、数据查看、消息互动等功能，适配中老年用户操作习惯
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-light rounded-xl p-6 transition-all duration-300 hover:shadow-md hover:shadow-tertiary/5 transform hover:-translate-y-1 border border-transparent hover:border-tertiary/10 group">
                        <div class="flex items-start space-x-4">
                            <div class="bg-success/10 rounded-full p-3">
                                <i class="fa fa-link text-success"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-xl mb-2">三方闭环</h3>
                                <p class="text-gray-600">
                                    建立医护‑患者‑家属三方沟通机制，实时数据共享，提升康复管理效率、患者训练依从性与康复效果
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 核心功能 -->
    <section id="features" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">核心功能</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                    我们的系统集成了多项先进技术，为康复训练提供科学、高效、个性化的解决方案
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 功能卡片1 -->
                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 card-hover group border border-transparent hover:border-primary/20 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="bg-primary/10 rounded-full w-14 h-14 flex items-center justify-center mb-6 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-primary/20 relative z-10">
                        <i class="fa fa-sensor text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-3 text-dark group-hover:text-primary transition-colors duration-300 relative z-10">多模态传感融合</h3>
                    <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                        集成加速度计、陀螺仪、肌电图、压力传感器等多种传感设备，全方位监测患者康复训练状态
                    </p>
                    <ul class="space-y-2 relative z-10">
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>实时动作捕捉与分析</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>肌肉活动度监测</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>压力分布实时反馈</span>
                        </li>
                    </ul>
                    <div class="absolute bottom-0 right-0 w-20 h-20 bg-primary/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                </div>
                
                <!-- 功能卡片2 -->
                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 card-hover group border border-transparent hover:border-secondary/20 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-secondary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="bg-secondary/10 rounded-full w-14 h-14 flex items-center justify-center mb-6 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-secondary/20 relative z-10">
                        <i class="fa fa-cloud text-secondary text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-3 text-dark group-hover:text-secondary transition-colors duration-300 relative z-10">边缘-云协同计算</h3>
                    <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                        采用边缘计算与云计算相结合的方式，实现低延迟数据处理和高精度分析
                    </p>
                    <ul class="space-y-2 relative z-10">
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>本地实时数据处理</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>云端深度学习分析</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>智能模型自适应更新</span>
                        </li>
                    </ul>
                    <div class="absolute bottom-0 right-0 w-20 h-20 bg-secondary/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                </div>
                
                <!-- 功能卡片3 -->
                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 card-hover group border border-transparent hover:border-warning/20 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-warning/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="bg-warning/10 rounded-full w-14 h-14 flex items-center justify-center mb-6 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-warning/20 relative z-10">
                        <i class="fa fa-bluetooth text-warning text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-3 text-dark group-hover:text-warning transition-colors duration-300 relative z-10">BLE 5.0 低功耗传输</h3>
                    <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                        采用蓝牙5.0低功耗技术，确保设备长时间稳定运行，减少充电频率
                    </p>
                    <ul class="space-y-2 relative z-10">
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>10+小时持续工作时间</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>多设备同步连接</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>数据传输加密保障</span>
                        </li>
                    </ul>
                    <div class="absolute bottom-0 right-0 w-20 h-20 bg-warning/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                </div>
                
                <!-- 功能卡片4 -->
                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 card-hover group border border-transparent hover:border-danger/20 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-danger/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="bg-danger/10 rounded-full w-14 h-14 flex items-center justify-center mb-6 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-danger/20 relative z-10">
                        <i class="fa fa-microchip text-danger text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-3 text-dark group-hover:text-danger transition-colors duration-300 relative z-10">AI 数据分析</h3>
                    <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                        基于人工智能算法，提供个性化康复方案制定和训练效果评估
                    </p>
                    <ul class="space-y-2 relative z-10">
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>动作偏差实时检测</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>个性化方案智能推荐</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>康复进度预测分析</span>
                        </li>
                    </ul>
                    <div class="absolute bottom-0 right-0 w-20 h-20 bg-danger/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                </div>
                
                <!-- 功能卡片5 -->
                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 card-hover group border border-transparent hover:border-success/20 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-success/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="bg-success/10 rounded-full w-14 h-14 flex items-center justify-center mb-6 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-success/20 relative z-10">
                        <i class="fa fa-mobile text-success text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-3 text-dark group-hover:text-success transition-colors duration-300 relative z-10">多平台适配</h3>
                    <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                        支持手机、平板、电脑等多设备访问，满足不同场景下的使用需求
                    </p>
                    <ul class="space-y-2 relative z-10">
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>iOS/Android 移动应用</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>Web 端管理平台</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>智能电视大屏显示</span>
                        </li>
                    </ul>
                    <div class="absolute bottom-0 right-0 w-20 h-20 bg-success/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                </div>
                
                <!-- 功能卡片6 -->
                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 card-hover group border border-transparent hover:border-primary/20 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="bg-primary/10 rounded-full w-14 h-14 flex items-center justify-center mb-6 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-primary/20 relative z-10">
                        <i class="fa fa-shield text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-3 text-dark group-hover:text-primary transition-colors duration-300 relative z-10">数据安全保障</h3>
                    <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                        采用多重加密技术和严格的数据访问控制，确保患者隐私和数据安全
                    </p>
                    <ul class="space-y-2 relative z-10">
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>端到端数据加密</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>多级权限管理</span>
                        </li>
                        <li class="flex items-center text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                            <i class="fa fa-check text-success mr-2 transform transition-transform duration-300 group-hover:scale-110"></i>
                            <span>符合医疗数据安全标准</span>
                        </li>
                    </ul>
                    <div class="absolute bottom-0 right-0 w-20 h-20 bg-primary/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 系统模块 -->
    <section id="modules" class="py-20 bg-gradient-to-b from-white to-primary/5 relative overflow-hidden">
        <!-- 背景装饰元素 -->
        <div class="absolute -top-20 -left-20 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-secondary/10 rounded-full blur-3xl"></div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-1 bg-primary/10 text-primary text-sm font-semibold rounded-full mb-3">系统架构</span>
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4 text-shadow-lg">系统模块</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg leading-relaxed">
                    我们的系统分为医护端和患者端两大模块，各自包含丰富的功能组件
                </p>
            </div>
            
            <!-- 模块切换标签 -->
            <div class="flex justify-center mb-12">
                <div class="inline-flex bg-gray-100/80 backdrop-blur-sm rounded-full p-1 shadow-sm">
                    <button id="doctor-tab" class="px-8 py-3 rounded-full bg-white text-primary font-medium shadow-md transform hover:scale-105 transition-all duration-300">
                        医护端
                    </button>
                    <button id="patient-tab" class="px-8 py-3 rounded-full text-gray-600 font-medium hover:text-primary hover:bg-gray-50 transition-all duration-300 transform hover:scale-105">
                        患者端
                    </button>
                </div>
            </div>
            
            <!-- 医护端内容 -->
            <div id="doctor-content" class="block">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="space-y-6">
                        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 group border border-transparent hover:border-primary/20 relative overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <h3 class="font-bold text-xl mb-3 flex items-center group-hover:text-primary transition-colors duration-300 relative z-10">
                                <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-3 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-primary/20">
                                    <i class="fa fa-users text-primary"></i>
                                </div>
                                患者管理
                            </h3>
                            <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                                实现患者信息录入、分组管理、权限分层，支持多角色操作，方便医护人员高效管理患者
                            </p>
                            <div class="flex flex-wrap gap-2 relative z-10">
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm hover:bg-primary/20 transition-colors duration-300">信息录入</span>
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm hover:bg-primary/20 transition-colors duration-300">分组管理</span>
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm hover:bg-primary/20 transition-colors duration-300">权限控制</span>
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm hover:bg-primary/20 transition-colors duration-300">批量操作</span>
                            </div>
                            <div class="absolute bottom-0 right-0 w-20 h-20 bg-primary/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                        </div>
                        
                        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 group border border-transparent hover:border-secondary/20 relative overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-secondary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <h3 class="font-bold text-xl mb-3 flex items-center group-hover:text-secondary transition-colors duration-300 relative z-10">
                                <div class="w-10 h-10 bg-secondary/10 rounded-full flex items-center justify-center mr-3 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-secondary/20">
                                    <i class="fa fa-bar-chart text-secondary"></i>
                                </div>
                                数据监测与分析
                            </h3>
                            <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                                多传感器融合数据实时监测，AI 偏差报告生成，异常预警提醒，帮助医护人员及时调整治疗方案
                            </p>
                            <div class="flex flex-wrap gap-2 relative z-10">
                                <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm hover:bg-secondary/20 transition-colors duration-300">实时监测</span>
                                <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm hover:bg-secondary/20 transition-colors duration-300">AI 分析</span>
                                <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm hover:bg-secondary/20 transition-colors duration-300">异常预警</span>
                                <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm hover:bg-secondary/20 transition-colors duration-300">趋势分析</span>
                            </div>
                            <div class="absolute bottom-0 right-0 w-20 h-20 bg-secondary/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                        </div>
                        
                        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 group border border-transparent hover:border-warning/20 relative overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-warning/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <h3 class="font-bold text-xl mb-3 flex items-center group-hover:text-warning transition-colors duration-300 relative z-10">
                                <div class="w-10 h-10 bg-warning/10 rounded-full flex items-center justify-center mr-3 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-warning/20">
                                    <i class="fa fa-file-text-o text-warning"></i>
                                </div>
                                效果评估与报告
                            </h3>
                            <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                                生成周/月康复报告，展示关键指标趋势，支持数据加密存档，为医疗决策提供科学依据
                            </p>
                            <div class="flex flex-wrap gap-2 relative z-10">
                                <span class="px-3 py-1 bg-warning/10 text-warning rounded-full text-sm hover:bg-warning/20 transition-colors duration-300">报告生成</span>
                                <span class="px-3 py-1 bg-warning/10 text-warning rounded-full text-sm hover:bg-warning/20 transition-colors duration-300">趋势分析</span>
                                <span class="px-3 py-1 bg-warning/10 text-warning rounded-full text-sm hover:bg-warning/20 transition-colors duration-300">数据存档</span>
                                <span class="px-3 py-1 bg-warning/10 text-warning rounded-full text-sm hover:bg-warning/20 transition-colors duration-300">导出分享</span>
                            </div>
                            <div class="absolute bottom-0 right-0 w-20 h-20 bg-warning/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-transparent hover:border-primary/10">
                        <h3 class="font-bold text-xl mb-6 text-dark text-shadow-sm">个性化方案制定</h3>
                        <div class="space-y-6">
                            <div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-primary/30 transform hover:-translate-y-1">
                                <div class="flex justify-between items-center mb-3">
                                    <h4 class="font-medium hover:text-primary transition-colors duration-300">模板库选择</h4>
                                    <span class="text-sm text-primary bg-primary/5 px-2 py-1 rounded-full">200+ 模板</span>
                                </div>
                                <p class="text-gray-600 text-sm mb-3">基于临床实践的标准康复方案模板，覆盖常见康复场景</p>
                                <div class="flex flex-wrap gap-2">
                                    <span class="px-3 py-1 bg-gray-100 rounded-full text-xs hover:bg-primary/10 hover:text-primary transition-colors duration-300 cursor-pointer">脑卒中康复</span>
                                    <span class="px-3 py-1 bg-gray-100 rounded-full text-xs hover:bg-primary/10 hover:text-primary transition-colors duration-300 cursor-pointer">骨折术后</span>
                                    <span class="px-3 py-1 bg-gray-100 rounded-full text-xs hover:bg-primary/10 hover:text-primary transition-colors duration-300 cursor-pointer">关节置换</span>
                                    <span class="px-3 py-1 bg-gray-100 rounded-full text-xs hover:bg-primary/10 hover:text-primary transition-colors duration-300 cursor-pointer">...更多</span>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-primary/30 transform hover:-translate-y-1">
                                <div class="flex justify-between items-center mb-3">
                                    <h4 class="font-medium hover:text-primary transition-colors duration-300">自定义编辑</h4>
                                    <i class="fa fa-sliders text-primary"></i>
                                </div>
                                <div class="space-y-3">
                                    <div>
                                        <div class="flex justify-between text-sm mb-1">
                                            <span>训练强度</span>
                                            <span class="text-primary font-medium">60%</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                                            <div class="bg-primary h-2 rounded-full transform scale-x-100 origin-left transition-transform duration-1000 ease-out" style="width: 60%"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex justify-between text-sm mb-1">
                                            <span>训练时长</span>
                                            <span class="text-primary font-medium">30分钟/次</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                                            <div class="bg-primary h-2 rounded-full transform scale-x-100 origin-left transition-transform duration-1000 ease-out delay-100" style="width: 50%"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex justify-between text-sm mb-1">
                                            <span>训练频率</span>
                                            <span class="text-primary font-medium">5次/周</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                                            <div class="bg-primary h-2 rounded-full transform scale-x-100 origin-left transition-transform duration-1000 ease-out delay-200" style="width: 70%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-warning/30 transform hover:-translate-y-1">
                                <div class="flex justify-between items-center mb-3">
                                    <h4 class="font-medium hover:text-warning transition-colors duration-300">AI 方案优化</h4>
                                    <i class="fa fa-lightbulb-o text-warning animate-pulse"></i>
                                </div>
                                <p class="text-gray-600 text-sm">基于患者历史数据和实时反馈，AI智能推荐最优训练方案调整</p>
                                <div class="mt-3 p-2 bg-warning/10 rounded text-sm text-warning hover:bg-warning/15 transition-colors duration-300 border border-warning/20">
                                    <i class="fa fa-info-circle mr-1"></i>
                                    AI建议：可增加上肢伸展训练10分钟，提升康复效果
                                </div>
                            </div>
                            
                            <button class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all duration-300 transform hover:scale-[1.02] shadow-md hover:shadow-lg flex items-center justify-center gap-2">
                                <i class="fa fa-paper-plane"></i>
                                生成并推送方案
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 患者端内容 -->
            <div id="patient-content" class="hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="space-y-6">
                        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 group border border-transparent hover:border-secondary/20 relative overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-secondary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <h3 class="font-bold text-xl mb-3 flex items-center group-hover:text-secondary transition-colors duration-300 relative z-10">
                                <div class="w-10 h-10 bg-secondary/10 rounded-full flex items-center justify-center mr-3 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-secondary/20">
                                    <i class="fa fa-home text-secondary"></i>
                                </div>
                                首页极简导航
                            </h3>
                            <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                                今日任务自动定位，操作流程简化，大字体设计，适配中老年用户操作习惯
                            </p>
                            <div class="flex flex-wrap gap-2 relative z-10">
                                <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm hover:bg-secondary/20 transition-colors duration-300">自动定位</span>
                                <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm hover:bg-secondary/20 transition-colors duration-300">大字体设计</span>
                                <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm hover:bg-secondary/20 transition-colors duration-300">简化操作</span>
                                <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm hover:bg-secondary/20 transition-colors duration-300">语音提示</span>
                            </div>
                            <div class="absolute bottom-0 right-0 w-20 h-20 bg-secondary/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                        </div>
                        
                        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 group border border-transparent hover:border-tertiary/20 relative overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-tertiary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <h3 class="font-bold text-xl mb-3 flex items-center group-hover:text-tertiary transition-colors duration-300 relative z-10">
                                <div class="w-10 h-10 bg-tertiary/10 rounded-full flex items-center justify-center mr-3 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-tertiary/20">
                                    <i class="fa fa-clipboard-check text-tertiary"></i>
                                </div>
                                训练指导
                            </h3>
                            <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                                3D 动画/真人视频示范，振动纠正反馈，双模态"视觉+触觉"纠偏，确保训练动作规范
                            </p>
                            <div class="flex flex-wrap gap-2 relative z-10">
                                <span class="px-3 py-1 bg-tertiary/10 text-tertiary rounded-full text-sm hover:bg-tertiary/20 transition-colors duration-300">3D动画</span>
                                <span class="px-3 py-1 bg-tertiary/10 text-tertiary rounded-full text-sm hover:bg-tertiary/20 transition-colors duration-300">视频示范</span>
                                <span class="px-3 py-1 bg-tertiary/10 text-tertiary rounded-full text-sm hover:bg-tertiary/20 transition-colors duration-300">振动纠正</span>
                                <span class="px-3 py-1 bg-tertiary/10 text-tertiary rounded-full text-sm hover:bg-tertiary/20 transition-colors duration-300">实时反馈</span>
                            </div>
                            <div class="absolute bottom-0 right-0 w-20 h-20 bg-tertiary/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                        </div>
                        
                        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 group border border-transparent hover:border-info/20 relative overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-info/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <h3 class="font-bold text-xl mb-3 flex items-center group-hover:text-info transition-colors duration-300 relative z-10">
                                <div class="w-10 h-10 bg-info/10 rounded-full flex items-center justify-center mr-3 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-info/20">
                                    <i class="fa fa-comments text-info"></i>
                                </div>
                                消息互动与激励
                            </h3>
                            <p class="text-gray-600 mb-4 leading-relaxed relative z-10">
                                医护消息推送，成就体系激励，紧急求助通道，提升训练积极性和安全性
                            </p>
                            <div class="flex flex-wrap gap-2 relative z-10">
                                <span class="px-3 py-1 bg-info/10 text-info rounded-full text-sm hover:bg-info/20 transition-colors duration-300">消息推送</span>
                                <span class="px-3 py-1 bg-info/10 text-info rounded-full text-sm hover:bg-info/20 transition-colors duration-300">成就体系</span>
                                <span class="px-3 py-1 bg-info/10 text-info rounded-full text-sm hover:bg-info/20 transition-colors duration-300">紧急求助</span>
                                <span class="px-3 py-1 bg-info/10 text-info rounded-full text-sm hover:bg-info/20 transition-colors duration-300">家属互动</span>
                            </div>
                            <div class="absolute bottom-0 right-0 w-20 h-20 bg-info/5 rounded-full -mb-10 -mr-10 transform transition-all duration-500 group-hover:scale-200"></div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-transparent hover:border-secondary/10">
                        <h3 class="font-bold text-xl mb-6 text-dark text-shadow-sm">数据查看与反馈</h3>
                        <div class="space-y-6">
                            <div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-secondary/30 transform hover:-translate-y-1">
                                <h4 class="font-medium mb-4 hover:text-secondary transition-colors duration-300">运动数据监测</h4>
                                <div class="w-full h-40 bg-gray-50 rounded-lg p-3 relative overflow-hidden">
                                    <canvas id="motionChart"></canvas>
                                    <div class="absolute top-2 right-2 bg-white/80 backdrop-blur-sm px-2 py-1 rounded text-xs shadow-sm">
                                        <i class="fa fa-refresh text-secondary mr-1"></i>实时更新中
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-secondary/30 transform hover:-translate-y-1">
                                <h4 class="font-medium mb-4 hover:text-secondary transition-colors duration-300">生理数据监测</h4>
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="bg-gray-50 p-3 rounded hover:bg-secondary/5 transition-colors duration-300 transform hover:scale-105 cursor-pointer">
                                        <div class="text-sm text-gray-500 mb-1">心率</div>
                                        <div class="flex items-end">
                                            <span class="text-2xl font-bold text-secondary">78</span>
                                            <span class="text-sm ml-1 mb-1">bpm</span>
                                        </div>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded hover:bg-secondary/5 transition-colors duration-300 transform hover:scale-105 cursor-pointer">
                                        <div class="text-sm text-gray-500 mb-1">血压</div>
                                        <div class="flex items-end">
                                            <span class="text-2xl font-bold text-secondary">120/80</span>
                                            <span class="text-sm ml-1 mb-1">mmHg</span>
                                        </div>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded hover:bg-secondary/5 transition-colors duration-300 transform hover:scale-105 cursor-pointer">
                                        <div class="text-sm text-gray-500 mb-1">活动量</div>
                                        <div class="flex items-end">
                                            <span class="text-2xl font-bold text-secondary">4,532</span>
                                            <span class="text-sm ml-1 mb-1">步</span>
                                        </div>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded hover:bg-secondary/5 transition-colors duration-300 transform hover:scale-105 cursor-pointer">
                                        <div class="text-sm text-gray-500 mb-1">训练时长</div>
                                        <div class="flex items-end">
                                            <span class="text-2xl font-bold text-secondary">45</span>
                                            <span class="text-sm ml-1 mb-1">分钟</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-secondary/30 transform hover:-translate-y-1">
                                <h4 class="font-medium mb-3 hover:text-secondary transition-colors duration-300">状态符号标注</h4>
                                <div class="grid grid-cols-3 gap-3">
                                    <div class="flex flex-col items-center p-3 bg-success/10 rounded-lg transform hover:scale-105 transition-all duration-300 hover:shadow-md cursor-pointer">
                                        <div class="w-12 h-12 rounded-full bg-success/20 flex items-center justify-center mb-2 transform hover:scale-110 transition-transform duration-300">
                                            <i class="fa fa-smile-o text-success text-xl"></i>
                                        </div>
                                        <span class="text-sm">训练达标</span>
                                    </div>
                                    <div class="flex flex-col items-center p-3 bg-warning/10 rounded-lg transform hover:scale-105 transition-all duration-300 hover:shadow-md cursor-pointer">
                                        <div class="w-12 h-12 rounded-full bg-warning/20 flex items-center justify-center mb-2 transform hover:scale-110 transition-transform duration-300">
                                            <i class="fa fa-meh-o text-warning text-xl"></i>
                                        </div>
                                        <span class="text-sm">动作需改进</span>
                                    </div>
                                    <div class="flex flex-col items-center p-3 bg-danger/10 rounded-lg transform hover:scale-105 transition-all duration-300 hover:shadow-md cursor-pointer">
                                        <div class="w-12 h-12 rounded-full bg-danger/20 flex items-center justify-center mb-2 transform hover:scale-110 transition-transform duration-300">
                                            <i class="fa fa-exclamation-triangle text-danger text-xl"></i>
                                        </div>
                                        <span class="text-sm">异常提醒</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 数据监测可视化 -->
    <section id="data" class="py-20 bg-gray-50 relative overflow-hidden">
        <!-- 背景装饰元素 -->
        <div class="absolute top-1/4 -left-20 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-1/4 -right-20 w-72 h-72 bg-secondary/10 rounded-full blur-3xl"></div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">实时数据监测</div>
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4 relative inline-block">
                    数据监测可视化
                    <span class="absolute bottom-2 left-0 w-24 h-1 bg-primary rounded-full"></span>
                </h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                    实时监测患者康复训练数据，通过直观的图表展示训练效果和进度
                </p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 康复进度趋势图 -->
                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 col-span-1 lg:col-span-2">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="font-bold text-xl flex items-center">
                            <i class="fa fa-line-chart text-primary mr-2"></i>
                            康复进度趋势
                        </h3>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm bg-primary text-white rounded-full hover:bg-primary/90 transition-all transform hover:scale-105">周</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-full transition-all transform hover:scale-105">月</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-full transition-all transform hover:scale-105">年</button>
                        </div>
                    </div>
                    <div class="w-full h-80 rounded-lg bg-gray-50 p-4">
                        <canvas id="progressChart"></canvas>
                    </div>
                    <div class="mt-4 flex items-center text-sm text-gray-500">
                        <i class="fa fa-info-circle mr-1"></i>
                        <span>数据每5分钟自动更新</span>
                    </div>
                </div>
                
                <!-- 关键指标卡片 -->
                <div class="space-y-6">
                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100">
                        <h3 class="font-bold text-xl mb-6 flex items-center">
                            <i class="fa fa-tachometer text-secondary mr-2"></i>
                            关键指标
                        </h3>
                        <div class="space-y-5">
                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-gray-600">训练完成率</span>
                                    <span class="font-bold text-success">85%</span>
                                </div>
                                <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                                    <div class="bg-success h-2.5 rounded-full" style="width: 85%" data-aos="progress-animation"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-gray-600">动作规范度</span>
                                    <span class="font-bold text-warning">72%</span>
                                </div>
                                <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                                    <div class="bg-warning h-2.5 rounded-full" style="width: 72%" data-aos="progress-animation"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-gray-600">进步速度</span>
                                    <span class="font-bold text-primary">+12%/周</span>
                                </div>
                                <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                                    <div class="bg-primary h-2.5 rounded-full" style="width: 65%" data-aos="progress-animation"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-gray-600">患者满意度</span>
                                    <span class="font-bold text-secondary">95%</span>
                                </div>
                                <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                                    <div class="bg-secondary h-2.5 rounded-full" style="width: 95%" data-aos="progress-animation"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100">
                        <h3 class="font-bold text-xl mb-6 flex items-center">
                            <i class="fa fa-pie-chart text-info mr-2"></i>
                            训练类型分布
                        </h3>
                        <div class="w-full h-48 rounded-lg bg-gray-50 p-4">
                            <canvas id="trainingTypeChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 动作监测数据 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100">
                    <h3 class="font-bold text-xl mb-6 flex items-center">
                        <i class="fa fa-angle-right text-primary mr-2"></i>
                        动作角度监测
                    </h3>
                    <div class="w-full h-64 rounded-lg bg-gray-50 p-4">
                        <canvas id="angleChart"></canvas>
                    </div>
                    <div class="mt-4 text-sm text-gray-500">
                        <span class="inline-block px-2 py-1 bg-info/10 text-info rounded mr-2">实时</span>
                        <span>角度误差小于2°</span>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100">
                    <h3 class="font-bold text-xl mb-6 flex items-center">
                        <i class="fa fa-heartbeat text-danger mr-2"></i>
                        肌肉活动度
                    </h3>
                    <div class="w-full h-64 rounded-lg bg-gray-50 p-4">
                        <canvas id="muscleActivityChart"></canvas>
                    </div>
                    <div class="mt-4 text-sm text-gray-500">
                        <span class="inline-block px-2 py-1 bg-warning/10 text-warning rounded mr-2">注意</span>
                        <span>活动度低于40%时会触发提醒</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 系统架构 -->
    <section id="architecture" class="py-20 bg-white relative overflow-hidden">
        <!-- 背景装饰元素 -->
        <div class="absolute top-0 left-1/4 w-80 h-80 bg-primary/5 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-secondary/5 rounded-full blur-3xl"></div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">技术架构</div>
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4 relative inline-block">
                    系统架构
                    <span class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-primary rounded-full"></span>
                </h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                    多层级系统架构设计，确保系统稳定、高效、可扩展
                </p>
            </div>
            
            <div class="relative">
                <!-- 架构图片 -->
                <div class="bg-gray-50 rounded-2xl p-8 mb-12 shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100">
                    <img src="https://picsum.photos/id/3/1200/400" alt="系统架构图" class="w-full h-auto rounded-xl shadow-sm transform hover:scale-[1.01] transition-transform duration-500">
                    <div class="mt-4 flex items-center justify-center text-sm text-gray-500">
                        <i class="fa fa-sitemap text-primary mr-2"></i>
                        <span>四层架构设计：感知层 → 边缘计算层 → 云端服务层 → 应用层</span>
                    </div>
                </div>
                
                <!-- 架构说明 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="bg-white rounded-xl p-6 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 relative overflow-hidden group">
                        <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="bg-primary/10 rounded-full w-12 h-12 flex items-center justify-center mb-4 transform group-hover:scale-110 transition-transform duration-300">
                            <i class="fa fa-microchip text-primary text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2 text-primary group-hover:text-primary/80 transition-colors">感知层</h3>
                        <p class="text-gray-600 text-sm relative z-10">
                            多模态传感器网络，包括加速度计、陀螺仪、肌电图、压力传感器等，实时采集患者运动和生理数据
                        </p>
                        <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 relative overflow-hidden group">
                        <div class="absolute inset-0 bg-gradient-to-br from-secondary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="bg-secondary/10 rounded-full w-12 h-12 flex items-center justify-center mb-4 transform group-hover:scale-110 transition-transform duration-300">
                            <i class="fa fa-mobile text-secondary text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2 text-secondary group-hover:text-secondary/80 transition-colors">边缘计算层</h3>
                        <p class="text-gray-600 text-sm relative z-10">
                            本地设备实时数据处理，低延迟动作识别和反馈，确保训练过程中的即时指导和纠正
                        </p>
                        <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-secondary to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 relative overflow-hidden group">
                        <div class="absolute inset-0 bg-gradient-to-br from-warning/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="bg-warning/10 rounded-full w-12 h-12 flex items-center justify-center mb-4 transform group-hover:scale-110 transition-transform duration-300">
                            <i class="fa fa-cloud text-warning text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2 text-warning group-hover:text-warning/80 transition-colors">云端服务层</h3>
                        <p class="text-gray-600 text-sm relative z-10">
                            云计算平台，深度学习模型训练，大数据分析，个性化方案生成，多用户数据管理
                        </p>
                        <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-warning to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 relative overflow-hidden group">
                        <div class="absolute inset-0 bg-gradient-to-br from-success/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="bg-success/10 rounded-full w-12 h-12 flex items-center justify-center mb-4 transform group-hover:scale-110 transition-transform duration-300">
                            <i class="fa fa-desktop text-success text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2 text-success group-hover:text-success/80 transition-colors">应用层</h3>
                        <p class="text-gray-600 text-sm relative z-10">
                            医护端和患者端应用界面，提供数据可视化、方案管理、训练指导、消息互动等功能
                        </p>
                        <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-success to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-16 relative overflow-hidden">
        <!-- 背景装饰元素 -->
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary via-secondary to-tertiary"></div>
        <div class="absolute top-1/4 -left-40 w-80 h-80 bg-primary/5 rounded-full blur-3xl"></div>
        <div class="absolute bottom-1/4 -right-40 w-80 h-80 bg-secondary/5 rounded-full blur-3xl"></div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
                <div class="transform hover:-translate-y-2 transition-transform duration-300">
                    <div class="flex items-center space-x-2 mb-6">
                        <i class="fa fa-heartbeat text-primary text-2xl animate-pulse"></i>
                        <span class="text-xl font-bold text-white">康复智联</span>
                    </div>
                    <p class="text-gray-400 mb-6 leading-relaxed">
                        可穿戴传感的个性化康复训练系统，为患者提供科学、高效、个性化的康复训练解决方案
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 transform hover:scale-110">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 transform hover:scale-110">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 transform hover:scale-110">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 transform hover:scale-110">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6 text-white group-hover:text-primary transition-colors">产品中心</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 inline-block hover:translate-x-1">医护端平台</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 inline-block hover:translate-x-1">患者端应用</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 inline-block hover:translate-x-1">智能硬件设备</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 inline-block hover:translate-x-1">数据分析服务</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 inline-block hover:translate-x-1">API接口文档</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6 text-white group-hover:text-primary transition-colors">关于我们</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 inline-block hover:translate-x-1">公司介绍</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 inline-block hover:translate-x-1">团队成员</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 inline-block hover:translate-x-1">合作伙伴</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 inline-block hover:translate-x-1">招贤纳士</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-all duration-300 inline-block hover:translate-x-1">联系方式</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6 text-white group-hover:text-primary transition-colors">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start group">
                            <i class="fa fa-map-marker text-primary mt-1 mr-3 transition-transform duration-300 group-hover:scale-110"></i>
                            <span class="text-gray-400 group-hover:text-white transition-colors">北京市海淀区中关村科技园区</span>
                        </li>
                        <li class="flex items-center group">
                            <i class="fa fa-phone text-primary mr-3 transition-transform duration-300 group-hover:scale-110"></i>
                            <span class="text-gray-400 group-hover:text-white transition-colors">400-123-4567</span>
                        </li>
                        <li class="flex items-center group">
                            <i class="fa fa-envelope text-primary mr-3 transition-transform duration-300 group-hover:scale-110"></i>
                            <span class="text-gray-400 group-hover:text-white transition-colors">contact@kangfuzhilian.com</span>
                        </li>
                    </ul>
                    <div class="mt-6 transform hover:-translate-y-1 transition-transform duration-300">
                        <h5 class="font-medium mb-3 text-white">订阅我们的新闻</h5>
                        <div class="flex">
                            <input type="email" placeholder="您的邮箱地址" class="px-4 py-2 rounded-l-lg w-full bg-gray-800 text-white border-none focus:outline-none focus:ring-2 focus:ring-primary transition-all">
                            <button class="px-4 py-2 bg-primary text-white rounded-r-lg hover:bg-primary/90 transition-all transform hover:scale-105 active:scale-95">
                                订阅
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
                <div class="mb-4 flex justify-center space-x-6">
                    <a href="#" class="text-gray-500 hover:text-gray-300 transition-colors text-sm">隐私政策</a>
                    <a href="#" class="text-gray-500 hover:text-gray-300 transition-colors text-sm">服务条款</a>
                    <a href="#" class="text-gray-500 hover:text-gray-300 transition-colors text-sm">Cookie 政策</a>
                    <a href="#" class="text-gray-500 hover:text-gray-300 transition-colors text-sm">网站地图</a>
                </div>
                <p>© 2025 康复智联科技有限公司. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('py-3');
                navbar.classList.add('py-2');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.remove('py-2');
                navbar.classList.add('py-3');
            }
        });
        
        // 移动端菜单
        document.querySelector('.fa-bars').parentElement.addEventListener('click', function() {
            document.getElementById('mobile-menu').classList.remove('hidden');
        });
        
        document.getElementById('close-menu').addEventListener('click', function() {
            document.getElementById('mobile-menu').classList.add('hidden');
        });
        
        // 模块切换
        document.getElementById('doctor-tab').addEventListener('click', function() {
            this.classList.add('bg-white', 'text-primary', 'shadow-md');
            this.classList.remove('text-gray-600');
            document.getElementById('patient-tab').classList.remove('bg-white', 'text-primary', 'shadow-md');
            document.getElementById('patient-tab').classList.add('text-gray-600');
            document.getElementById('doctor-content').classList.remove('hidden');
            document.getElementById('doctor-content').classList.add('block');
            document.getElementById('patient-content').classList.add('hidden');
            document.getElementById('patient-content').classList.remove('block');
        });
        
        document.getElementById('patient-tab').addEventListener('click', function() {
            this.classList.add('bg-white', 'text-primary', 'shadow-md');
            this.classList.remove('text-gray-600');
            document.getElementById('doctor-tab').classList.remove('bg-white', 'text-primary', 'shadow-md');
            document.getElementById('doctor-tab').classList.add('text-gray-600');
            document.getElementById('patient-content').classList.remove('hidden');
            document.getElementById('patient-content').classList.add('block');
            document.getElementById('doctor-content').classList.add('hidden');
            document.getElementById('doctor-content').classList.remove('block');
        });
        
        // 初始化图表
        window.addEventListener('load', function() {
            // 运动数据图表
            const motionCtx = document.getElementById('motionChart').getContext('2d');
            new Chart(motionCtx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '训练时长（分钟）',
                        data: [30, 35, 40, 38, 45, 30, 42],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            
            // 康复进度趋势图
            const progressCtx = document.getElementById('progressChart').getContext('2d');
            new Chart(progressCtx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '动作规范度',
                        data: [65, 68, 70, 72, 75, 73, 76],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        tension: 0.4,
                        fill: true
                    }, {
                        label: '肌肉活动度',
                        data: [58, 62, 65, 63, 70, 68, 72],
                        borderColor: '#36CBCB',
                        backgroundColor: 'rgba(54, 203, 203, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100
                        }
                    }
                }
            });
            
            // 训练类型分布图
            const trainingTypeCtx = document.getElementById('trainingTypeChart').getContext('2d');
            new Chart(trainingTypeCtx, {
                type: 'doughnut',
                data: {
                    labels: ['上肢训练', '下肢训练', '平衡训练', '柔韧性训练'],
                    datasets: [{
                        data: [40, 30, 20, 10],
                        backgroundColor: ['#165DFF', '#36CBCB', '#52C41A', '#FAAD14']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
            
            // 动作角度监测图
            const angleCtx = document.getElementById('angleChart').getContext('2d');
            new Chart(angleCtx, {
                type: 'bar',
                data: {
                    labels: ['肩部', '肘部', '腕部', '髋部', '膝部', '踝部'],
                    datasets: [{
                        label: '实际角度',
                        data: [85, 120, 90, 75, 110, 80],
                        backgroundColor: '#165DFF'
                    }, {
                        label: '目标角度',
                        data: [90, 130, 95, 80, 120, 85],
                        backgroundColor: 'rgba(54, 203, 203, 0.5)'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            
            // 肌肉活动度图
            const muscleActivityCtx = document.getElementById('muscleActivityChart').getContext('2d');
            new Chart(muscleActivityCtx, {
                type: 'radar',
                data: {
                    labels: ['肱二头肌', '肱三头肌', '三角肌', '股四头肌', '腘绳肌', '臀大肌'],
                    datasets: [{
                        label: '活动度',
                        data: [70, 65, 75, 60, 55, 65],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.2)',
                        pointBackgroundColor: '#165DFF'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        r: {
                            beginAtZero: true,
                            max: 100
                        }
                    }
                }
            });
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    // 关闭移动菜单
                    document.getElementById('mobile-menu').classList.add('hidden');
                }
            });
        });
    </script>
</body>
</html>